<h2 class="page-header">Server Rendered/Cached React/Redux Component</h2>
<br/>
<p>
  This example demonstrates server side rendering using Redux. The only difference from client rendering is that
  the <code>prerender</code> option is true.<br/>
</p>
<h2 class="section-header">Result</h2>
<%= cached_react_component(
  "ReduxApp",
  cache_key: @app_props_server_render,
  prerender: true,
  trace: true,
  id: "ReduxApp-react-component-0"
) do
  @app_props_server_render.merge(prerender: true)
end %>
<hr/>
<br/>

The source HTML of this page will show the server rendered HTML.<br/>
<pre><code class="language-markup">
<%= <<-CODE
<div id="ReduxApp-react-component-0">
  <div data-reactid=".uwwa3eq70g" data-react-checksum="-1318287018">
    <h3 data-reactid=".uwwa3eq70g.0">
      <span data-reactid=".uwwa3eq70g.0.0">Redux Hello, </span>
      <span data-reactid=".uwwa3eq70g.0.1">
        Mr. Server Side Rendering
      </span>
      <span data-reactid=".uwwa3eq70g.0.2">!</span>
    </h3>
    <p data-reactid=".uwwa3eq70g.1">
      <span data-reactid=".uwwa3eq70g.1.0">With Redux, say hello to:</span>
      <input type="text" value="Mr. Server Side Rendering" data-reactid=".uwwa3eq70g.1.1">
    </p>
  </div>
</div>
    CODE
  %></code></pre>

<h2 class="section-header">Setup</h2>
<ol>
  <li>
    Create redux listening component: spec/dummy/client/app/components/HelloWorldRedux.jsx
  </li>
  <li>
    Create redux container: spec/dummy/client/app/components/HelloWorldContainer.js
  </li>
  <li>
    Create redux app client side: spec/dummy/client/app/startup/ClientReduxApp.jsx
  </li>
  <li>
    Create redux app server side: spec/dummy/client/app/startup/ServerReduxApp.jsx
  </li>
  <li>
    Expose the Redux Component on the client side:
    spec/dummy/client/app/packs/client-bundle.js
    <br/>
    <pre><code class="language-jsx">
import ReduxApp from './ClientReduxApp';
import ReactOnRails from 'react-on-rails';
ReactOnRails.register({ ReduxApp });</code></pre>
  </li>
  <li>
    Expose the Redux Component on the server side:
    spec/dummy/client/app/packs/server-bundle.js
    <br/>
    <pre><code class="language-jsx">
import ReduxApp from './ServerReduxApp';
global.ReduxApp = ReduxApp;</code></pre>
  </li>
  <li>
    Place the component on the view: spec/dummy/app/views/pages/server_side_redux_app_cached.html.erb.
    Note the cache block.
    <br/>
    <pre><code class="language-ruby">
<%% cache @app_props_server_render do %>
  <%%= react_component("ReduxApp", props: @app_props_server_render.merge(prerender: true), prerender: true, trace: true, id: "ReduxApp-react-component-0") %>
<%% end %></code></pre>
  </li>
</ol>
<hr/>
<h2>
  Notes on Fragment Caching
</h2>
<ol>
  <li>
    Run <code>rails c</code> to open a Rails console, and then run <code>Rails.cache.clear</code> to clear the cache.
  </li>
  <li>
    Refresh this page and you will see something like this:
    <pre class="log-section">
    22:55:23 web.1    | ================================================================================
    22:55:23 web.1    | server rendering react components
    22:55:23 web.1    | ================================================================================</pre>
  </li>
  <li>
    Refresh the page again and you will not see this print again. This confirms that the fragment
    of HTML was cached. This can be a big performance boost. Note, we're caching the HTML of server
    rendered react using Redux.
  </li>
</ol>
